<template>
  <!-- 添加或修改研发经费对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body :close-on-click-modal="false" v-dialogDrag>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-tabs v-model="activeName" class="detail-tab" type="card">
        <el-tab-pane label="基本信息" name="first">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="费用名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入费用名称" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="费用类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择费用类型" style="width: 100%;">
                  <el-option v-for="dict in dict.type.fee_type" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="dept-tree-select">
              <el-form-item label="归属部门" prop="deptId">
                <treeselect v-model="form.deptId" :options="deptOptions" @select="selectDept" :show-count="true"
                  placeholder="请选择归属部门" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="费用金额" prop="money">
                <el-input-number :precision="2" :step="0.1" v-model="form.money" :min="0" :max="99999999999999.99"
                  placeholder="请输入费用金额" />
              </el-form-item>
            </el-col>
            <!--<el-col :span="12">
                <el-form-item label="项目id" prop="proId">
                    <el-input v-model="form.proId" placeholder="请输入项目id"/>
                </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="项目名称" prop="proId">
                <el-select v-model="form.proId" placeholder="请选择项目名称" filterable clearable :disabled="form.id!=null"
                  ref="proId" style="width: 100%;">
                  <el-option v-for="dict in proNameOptions" @click.native="changePro(dict)" :key="dict.value"
                    :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <!--<el-col :span="12">
                <el-form-item label="项目名称" prop="proName">
                    <el-input v-model="form.proName" placeholder="请输入项目名称"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="是否报销(0否/1是)" prop="reimburse">
                    <el-input v-model="form.reimburse" placeholder="请输入是否报销(0否/1是)"/>
                </el-form-item>
            </el-col>-->
            <!--<el-col :span="12">
                <el-form-item label="小组id" prop="teamId">
                    <el-input v-model="form.teamId" placeholder="请输入小组id"/>
                </el-form-item>
            </el-col>-->
            <el-col :span="12">
              <el-form-item label="客户名称" prop="customerId">
                <el-select v-model="form.customerId" placeholder="请选择客户" filterable @change="selectCustomer" clearable
                  style="width: 100%;">
                  <el-option v-for="dict in dict.type.goods_customer" ref="myselectCustomer" :key="dict.value"
                    :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-col :span="12">
            <el-form-item label="费用用途" prop="yongtu">
              <el-input v-model="form.yongtu" placeholder="请输入费用用途"/>
            </el-form-item>
          </el-col> -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="发生日期" prop="feeDate">
                <el-date-picker clearable placeholder="请选择发生日期" type="date" v-model="form.feeDate"
                  value-format="yyyy-MM-dd" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否取得发票" prop="invoice">
                <el-radio-group v-model="form.invoice" ref="invoice" style="width: 100%;">
                  <el-radio v-for="dict in dict.type.yes_no" :key="dict.value" :label="dict.value">{{dict.label}}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.invoice == '1'">
              <el-form-item label="发票代码" prop="invoiceCode">
                <el-input v-model="form.invoiceCode" placeholder="请输入发票代码" />
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="form.invoice == '1'">
              <el-form-item label="发票号码" prop="invoiceNo">
                <el-input v-model="form.invoiceNo" placeholder="请输入发票号码" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input placeholder="请输入备注" type="textarea" v-model="form.remark" />
              </el-form-item>
            </el-col>
          </el-row>
          <!--<el-col :span="12">
              <el-form-item label="归属部门" prop="deptName">
                  <el-input v-model="form.deptName" placeholder="请输入归属部门"/>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="有无含税发票" prop="invoiceTax">
                  <el-input v-model="form.invoiceTax" placeholder="请输入有无含税发票"/>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="含税单价" prop="costPriceTax">
                  <el-input v-model="form.costPriceTax" placeholder="请输入含税单价"/>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="含税总价" prop="costTax">
                  <el-input v-model="form.costTax" placeholder="请输入含税总价"/>
              </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="报销打款信息id" prop="imburseId">
                  <el-input v-model="form.imburseId" placeholder="请输入报销打款信息id"/>
              </el-form-item>
          </el-col> -->
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    addAction,
    getAction,
    getById,
    updateAction
  } from '@/api/manage'
  import moment from 'moment';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    treeselect
  } from "@/api/system/dept";
  import request from '@/utils/request'

  export default {
    name: "GoodsFeeForm",
    dicts: ['fee_type', 'yes_no', 'goods_customer'],
    components: {
      Treeselect,
    },
    data() {
      return {
        // 部门树选项
        deptOptions: [],
        // 遮罩层
        loading: true,
        activeName: "first",
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        proNameOptions: [],
        // 表单校验
        rules: {
          name: [{
            required: true,
            message: "费用名称不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "费用类型不能为空",
            trigger: "change"
          }],
          deptId: [{
            required: true,
            message: "归属部门不能为空",
            trigger: "blur"
          }],
          invoice: [{
            required: true,
            message: "请选择是否取得发票",
            trigger: "blur"
          }],
          money: [{
            required: true,
            message: "费用金额不能为空",
            trigger: "blur"
          }],
          /*proId: [
              {required: true, message: "所属项目不能为空", trigger: "blur"}
          ],
          customerId: [
              {required: true, message: "请选择费用归属客户", trigger: "blur"}
          ],*/
          feeDate: [{
            required: true,
            message: "发生日期不能为空",
            trigger: "blur"
          }],
          invoiceCode: [{
            required: true,
            message: "发票代码不能为空",
            trigger: "blur"
          }],
          invoiceNo: [{
            required: true,
            message: "发票号码不能为空",
            trigger: "blur"
          }],
        },
        url: {
          getById: '/goodsFee/goodsFee/',
          add: '/goodsFee/goodsFee/add',
          edit: '/goodsFee/goodsFee/edit',
          proNames: '/projectBaseInfo/projectBaseInfo/prjNames',
        },
      };
    },
    created() {
      this.getTreeselect();
      this.initProDicts();
    },
    methods: {
      //项目费用页面添加研发经费
      addFeeFromProject(projectInfo) {
        let that = this;
        that.open = true;
        that.reset();
        that.form.proId = projectInfo.id;
        that.form.proName = projectInfo.name;
        that.form.customerId = projectInfo.customId;
        that.form.customerName = projectInfo.customName;

      },
      selectCustomer(value) {
        let that = this;
        that.$nextTick(() => {
          let arr = that.$refs.myselectCustomer;
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].currentValue == value) {
              that.form.customerName = arr[i].label;
            }
          }
        })
      },
      changePro(dict) {
        let that = this;
        that.form.proName = dict.label;
        that.$set(that.form, "customerId", dict.dictValue);
        that.$set(that.form, "customerName", dict.dictLabel);
        // this.form.customerId = dict.label;
        // this.form.customerName = dict.label;
      },
      initProDicts() {
        let that = this;
        getAction(that.url.proNames, {
          orderByColumn: "create_time",
          isAsc: "desc"
        }).then(res => {
          that.proNameOptions = res.data.nameList;
        })
      },
      selectDept(e) {
        let that = this;
        that.$set(that.form, "deptName", e.label);
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          type: null,
          status: "whx",
          yongtu: null,
          proId: null,
          proName: null,
          reimburse: null,
          teamId: this.$store.getters.deptId,
          teamName: this.$store.getters.deptName,
          invoice: null,
          invoiceCode: null,
          invoiceNo: null,
          invoiceTax: null,
          costPriceTax: null,
          costTax: null,
          imburseId: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          money: null,
          feeDate: new Date(),
        };
        this.resetForm("form");
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加研发经费";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids;
        getById(this.url.getById, id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改研发经费";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateAction(this.url.edit, this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.$emit('ok');
              });
            } else {
              addAction(this.url.add, this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.$emit('ok');
              });
            }
          }
        });
      },
    }
  };
</script>

<style>
  .dept-tree-select .el-form-item--medium .el-form-item__content {
    height: 36px;
  }
</style>
